<template>
  <div
    ref="echartsPie"
    class="echartsPie"
    :style="{ width: width, height: height }"
  ></div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
//  按需引入 echarts
import * as echarts from 'echarts';
import 'echarts-gl';
const echartsPie = ref(); // 使用ref创建虚拟DOM引用，使用时用main.valued
const emit = defineEmits(['changeIndex']);
let props = defineProps({
  options: Object,
  titleName: String,
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
  lengthData: Number,
});
let myChart = null;
onMounted(() => {
  window.addEventListener('resize', resizeChart);
});

function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

watch(
  () => props.options,
  (newval, oldval) => {
    init(newval);
  }
);
let highlightInterval = null; // 定时器
// 定时高亮扇形
const startHighlight = () => {
  try {
    if (!myChart) return;
    let currentIndex = 0; // 当前高亮的扇形索引
    highlightInterval = setInterval(() => {
      // 取消之前的高亮
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0, // 系列索引
        dataIndex: currentIndex, // 数据索引
      });

      // 更新高亮索引
      currentIndex = props.lengthData
        ? (currentIndex + 1) % props.lengthData
        : (currentIndex + 1) % 4;
      emit('changeIndex', currentIndex);
      // 高亮当前扇形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0, // 系列索引
        dataIndex: currentIndex, // 数据索引
      });
    }, 10000); // 每 3 秒切换一次
  } catch (e) {}
};

async function init(newval) {
  // 基于准备好的dom，初始化echarts实例
  if (!myChart) {
    myChart = echarts.init(echartsPie.value);
  }

  let option = newval;
  myChart.setOption(option);
  resizeChart();
  // 添加点击事件
  myChart.on('click', function (params) {
    // params 是一个对象，包含了点击的系列信息
    console.log(params);
    alert('你点击了: ' + params.name + '，值为: ' + params.value);
  });
  // startHighlight();
}

onUnmounted(() => {
  if (highlightInterval) {
    clearInterval(highlightInterval); // 清除定时器
  }
  if (myChart) {
    myChart.dispose(); // 销毁图表实例
    clearInterval(highlightInterval); // 清除定时器
  }
});
</script>
<style scoped>
.echartsPie {
  width: 100%;
  height: 100%;
  /* width: 320px;
  height: 320px; */
}
</style>
